<template>
  <commonTable
    rowKey="roomPackageId"
    :columns="roomTypeTableState.columns"
    :query="{isPublic: 1}"
    :rules="rules"
    @change="handleChange"
    :create="false"
    :canEdit="false"
    :canDelete="false"
    name="roomPackage"
    :addon="true"
  >
    <!--    id  房间id 价格 是否含早 动态折扣id  押金id 是否公开 -->
    <template #addon="{ record }">
      <a-button type="link" @click="handleBook(record)">预定</a-button>
    </template>
    <template #form="{ record }">
      <a-form-item label="套餐价格" name="roomPackagePrice">
        <a-input
          type="number"
          v-model:value.number="record.roomPackagePrice"
        ></a-input>
      </a-form-item>
      <a-form-item label="含早" name="isBreakfast">
        <h-select v-model:value="record.isBreakfast" name="boolean"></h-select>
      </a-form-item>
      <a-form-item label="公开" name="isPublic">
        <h-select v-model:value="record.isPublic" name="boolean"></h-select>
      </a-form-item>
      <a-form-item label="房间" name="roomId">
        <h-select v-model:value="record.roomId" name="room"></h-select>
      </a-form-item>
      <a-form-item label="押金" name="depositId">
        <h-select v-model:value="record.depositId" name="deposit"></h-select>
      </a-form-item>
      <a-form-item label="折扣" name="discountId">
        <h-select v-model:value="record.discountId" name="discount"></h-select>
      </a-form-item>
    </template>
  </commonTable>
  <commonTable
    :query="{ userId: store.state.user.username }"
    rowKey="bookId"
    :columns="columns"
    :canEdit="false"
    :canDelete="false"
    :rules="[]"
    name="book"
    :create="false"
  >
  </commonTable>
  <a-modal title="房间预订" v-model:visible="visible" @ok="handleOk">
    <a-form ref="formRef" :model="formState" :rules="formRules">
      <a-form-item name="dateRange" label="预定时间">
        <a-range-picker v-model:value="formState.dateRange" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import commonTable from "../../utils/CommonTable";
import HSelect from "@/components/HSelect";
import { Moment } from "moment";
import { book } from "@/api";

const columns = [
  {
    title: "序号",
    dataIndex: "bookId",
  },
  {
    title: "房间号",
    dataIndex: "roomPackage.room.roomNo",
  },
  {
    title: "房间类型",
    dataIndex: "roomPackage.room.roomType.roomTypeName",
  },
  {
    title: "楼层",
    dataIndex: "roomPackage.room.floor.floorName",
  },
  {
    title: "含早",
    dataIndex: "roomPackage.isBreakfast",
    slots: { customRender: "boolean" },
  },
];
const formRef = ref();
const store = useStore();
const roomTypeTableState = reactive({
  dataSource: [],
  columns: [
    {
      title: "序号",
      dataIndex: "roomPackageId",
    },
    {
      title: "套餐价格",
      dataIndex: "roomPackagePrice",
    },
    {
      title: "含早",
      key: "isBreakfast",
      dataIndex: "isBreakfast",
      slots: { customRender: "boolean" },
    },
    {
      title: "公开",
      key: "isPublic",
      dataIndex: "isPublic",
      slots: { customRender: "boolean" },
    },
    {
      title: "房间号",
      dataIndex: "room.roomNo",
    },
    {
      title: "明窗",
      key: "room.isWindow",
      dataIndex: "room.isWindow",
      slots: { customRender: "boolean" },
    },
    {
      title: "把边",
      key: "room.isSide",
      dataIndex: "room.isSide",
      slots: { customRender: "boolean" },
    },
    {
      title: "押金金额",
      dataIndex: "deposit.depositPrice",
    },
    {
      title: "押金描述",
      dataIndex: "deposit.depositDescription",
    },
    {
      title: "折扣价格",
      dataIndex: "discount.discountPrice",
    },
    {
      title: "折扣描述",
      dataIndex: "discount.discountDescription",
    },
  ],
});
const rules = {
  roomPackagePrice: [
    { type: "number", min: 1, required: true, message: "套餐价格必须大于0元" },
  ],
  isBreakfast: [{ type: "number", required: true, message: "必填" }],
  isPublic: [{ type: "number", required: true, message: "必填" }],
  roomId: [{ type: "number", required: true, message: "必填" }],
  depositId: [{ type: "number", required: true, message: "必填" }],
  discountId: [{ type: "number", required: true, message: "必填" }],
};

// 弹出框
const visible = ref(false);
const currentValue = ref({});
const handleChange = (val) => {
  console.log(val);
  currentValue.value = val;
};
const formState = ref({
  dateRange: [],
});
const handleBook = (r) => {
  formState.value = JSON.parse(JSON.stringify(r));
  visible.value = true;
};
const formRules = reactive({
  dateRange: [{ required: true }],
});
const handleOk = async () => {
  await formRef.value.validate();
  console.log(formState.value.dateRange[0], formState.value.dateRange[1]);
  const [startDate, endDate] = formState.value.dateRange;
  const dateArr = [];
  const days = endDate.diff(startDate, "days");
  for (let i = 0; i < days; i++) {
    dateArr.push(startDate.format("yyyy-MM-DD"));
    startDate.add(1, "days");
  }
  const date = new Date();
  console.log(formState.value);
  const payload = {
    bookId: formState.value.bookId,
    userId: store.state.user.username || "123",
    roomPackageId: formState.value.roomPackageId,
    bookTime: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
    isActive: 0,
    roomBook: dateArr,
  };
  const res = await book.update(payload);
  visible.value = false;
  console.log(res);
};
</script>

<style scoped></style>
